<div class="comment-outer" style="padding-top:40px">
    <!-展示评论和回复评论，有层级-->
    {% load comments %}
    {% load threadedcomments_tags %}
    {% get_comment_list for blog as comment_list %}
    {% for comment in comment_list|fill_tree|annotate_tree %}
        <div class="comment-detail {% if  comment.parent_id %}comment-padding{% endif %} clearfix">
            <div class="comment-photo ">
                <a class="pull-left " style="padding-right:10px" href="#">
                    <img class="media-object"  src="{{ comment.user.socialaccount_set.all.0.get_avatar_url }}" alt=""
                                             style="width:48px;margin: 0 auto;">
                     <span style="text-align: center;">{{ comment.user }}</span>
                </a>
            </div>
            <div class="comment-wrapper ">
                {{ comment.user_name }}
                {% if comment.parent %}
                    <span class=" glyphicon glyphicon-heart" style="padding-right: 8px;"></span>
                {% endif %}
                {{ comment.parent.user_name }}
                {#                                            #}
                {#                                                    {{ comment.open }}---++#}
                {#                                                    {{ comment.close }}---++#}
                {#                                                    {{ comment.last }}---++#}
                {#                                                    {{ comment.parent_id }}---++#}
                <div class="comment-reply">
                    {% autoescape off %}
                        {{ comment.comment }}
                    {% endautoescape %}
                </div>
                <div>
                    {{ comment.submit_date|date:"d M Y, H:i" }}
                    | <a href="#c{{ comment.id }}" data-comment-id="{{ comment.id }}"
                         class="comment_reply_link">Reply</a>
                </div>

            </div>
        </div>
        <hr style="height:1px;">
    {% endfor %}
</div>
<script>
    jQuery(function ($) {
        function show_reply_form(event) {
            var $this = $(this);
            var comment_id = $this.data('comment-id');

            $('#id_parent').val(comment_id);
            $('#form-comment').appendTo($this.closest('.comment-detail'));
            {#$('#form-comment').appendTo($this);#}

        };

        function cancel_reply_form(event) {
            {#$("#id_comment").innerHTML="";#}
            $('#form-comment').appendTo($('.comment-editor'));
            {#$('#id_comment').val('');#}
            {#$('#id_parent').val('');#}
            $('.simditor-body').empty();
            $('#editor').append($('.simditor-body').html("<p >请输入你的留言...</p>"));
            {#$(".simditor-placeholder").val();#}
        }

        $.fn.ready(function () {
            $('.comment_reply_link').on("click", show_reply_form);
            $('#cancel_reply').on("click", cancel_reply_form);
        })
    });

    function commentFormHandler() {
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                var csrftoken = $.cookie('csrftoken');
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        });
        $('#form-comment form').submit(function () {
            $.ajax({
                type: "POST",
                data: $('#form-comment form').serialize(),
                url: "{% comment_form_target %}",
                cache: false,
                dataType: "html",
                success: function (html, textStatus) {
                    $('.simditor-body').empty();
                    $('#editor').append($('.simditor-body').html("<p >请输入你的留言...</p>"));
                    $('#form-comment').appendTo($('.comment-editor'));
                    comment = $("#id_comment").val();
                    {#$(".comment-outer").prepend();#}
                    {#alert(comment);#}
                    {#alert($("#id_parent").val());#}
                    {# alert($("#id_timestamp").val());#}
                    {# alert("{{ request.user.username }}");#}
                    {# alert("{{ form.comment }}");#}
                    {#$(".comment-outer").prepend(comment);#}
                    {#window.location.reload();#}
                    $(".comment-outer").replaceWith(html)

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('#form-comment form').replaceWith('Your comment was unable to be posted at this time.  We apologise for the inconvenience.');
                }
            });
            return false;
        });
    };
    $(document).ready(function () {
        commentFormHandler();
    });
</script>